<template>
  <div class="waterAnalysis">
    <button class="leftTreetitleButton" @click=zhangkaisous() v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <areaLeftTree class="waterMeterLeftTree" @getSearch="getSearch" @handleId="handleId"
        @handleLocation="handleLocation" @clickClose="clickClose" :treeId="treeId" :moniIds="moniIds"/>
      <div v-if="treeShowOrClose">
        <Map :position="location" />
      </div>
    </div>
    <!-- 右侧内容 -->
    <div :class="[
      { rightcontant: treeShowOrClose },
      { rightcontant2: !treeShowOrClose },
    ]">
      <div class="right-tabs">
        <deviceStatistics :nodeData="nodeData" :hydrantId="hydrantId"></deviceStatistics>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "./components/map";
import areaLeftTree from "./components/areaLeftTree"; // 区域树
import deviceStatistics from "./deviceStatistics"; // 设备统计模板
export default {
  components: {
    Map,
    areaLeftTree,
    deviceStatistics,
  },

  data() {
    return {
      treeShowOrClose: true,
      location: {
        loca: "",
        state: ""
      },
      //分页
      hydrantId: "",
      nodeData: {}, // 检测点数据
      emptyType: 0,
    };
  },
  mounted() {

  },
  created() {

    // this.reload()
  },

  methods: {
    zhangkaisous() {
      this.treeShowOrClose = true
      this.moniIds = this.hydrantId
      this.handleLocation()
    },
    clickClose(res) {
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    handleId(e) {
      console.log(e)
      this.hydrantId = e
    },
    handleLocation(e, state) {
      this.location.loca = e
      this.location.state = state
    },
    getSearch(e) {
      this.nodeData = e;
      console.log(this.nodeData);
    },
    handleClick(tab, event) {
      // console.log(this.activeName);
    },
  },
};
</script>

<style lang="scss" scoped>
.waterAnalysis {
  display: flex;

  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }

  .leftTree {
    width: 270px;

    // border-right: 1px solid #e6e6e6;
    // border-bottom: 1px solid #e6e6e6;
    .waterMeterLeftTree {
      height: 455px;
    }
  }

  .rightcontant {
    width: calc(100% - 270px);
    padding: 20px 2px 20px 2px;
  }

  .rightcontant2 {
    width: 100%;
    padding: 20px 2px 20px 2px;
  }

  .right-tabs {
    margin-left: 20px;
    height: 100%;

    .box-card {
      height: 100%;
    }
  }
}
</style>
